<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name='referrer' content="never">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .navbar {
            width: 1200px;
            height: 50px;
            margin: 0 auto;
        }

        .container {
            width: 1200px;
            margin: 20px auto 0;
        }

        .water ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            float: left;
            width: 275px;
            border: 1px solid #ccc;
            margin: 0 8px;
        }

        .water ul li {
            margin-bottom: 20px;
            border-bottom: 5px solid red;
        }
    </style>
    <title>堆糖瀑布流</title>
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <div class="container water">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./node_modules/layui-layer/dist/layer.js"></script>
<script>
    var flag = true
    var start = 0
    var loadindex = layer.load(0, {
        shade: [0.3, 'skyblue']
    })
    //发送Ajax封装函数
    function loadHtml() {
        if(!flag){
            return false
        }
        flag = false
        $.get('/duitang', {
            include_fields: "top_comments,is_root,source_link,item,buyable,root_id,status,like_count,sender,album,reply_count",
            filter_id: "家居生活",
            start,
            _: +new Date()
        }, res => {
            // console.log(res)
            var data = res.data.object_list
            //for循环创建li
            for (var i = 0; i < data.length; i++) {
                var li = `
                <img src='${data[i].photo.path}' width="275" height="${data[i].photo.height * 275 / data[i].photo.width}">
                <p>${data[i].album.name}</p>
                <p>${data[i].msg}</p>
            `
                var minUl = getMinul()

                minUl.innerHTML += li
            }
            //加载好数据之后关闭弹出层
            layer.close(loadindex)
            flag = true
            start += 24
        }, 'json')
    }
    loadHtml()
    //求最短的ul封装函数
    function getMinul() {
        //找出最小的ul，先添加li
        var minUl = $(".water ul")[0]
        for (var j = 1; j < $(".water ul").length; j++) {
            if (minUl.offsetHeight > $(".water ul")[j].offsetHeight) {
                minUl = $(".water ul")[j]
            }
        }
        return minUl
    }
    //监听滚动条事件
    $(window).scroll(function () {
        var t = document.body.scrollTop || document.documentElement.scrollTop
        //求最短的ul
        var minUl = getMinul()
        if(t - 50 + innerHeight > minUl.offsetHeight - 200){
            loadHtml()
        }
    })
</script>

</html>